<script setup>
import {h, ref, inject } from "vue";
import { RouterLink } from "vue-router";
import { NIcon } from "naive-ui";
import {
  BookOutline as BookIcon,
  LogOutOutline as LogoutIcon,
  PersonCircleOutline as UserIcon,
  WineOutline as WineIcon
} from "@vicons/ionicons5";
import TypeIt from 'typeit'
import index01 from '@/assets/picture/index01.png'
import index02 from '@/assets/picture/index02.png'
import index03 from '@/assets/picture/index03.png'
const {toPage} = inject('toPage')
const user = JSON.parse(sessionStorage.getItem('user'))
//展示图片设置
const showImg = ref([
  {url: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA01.png'},
  {url: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA02.png'},
  {url: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA03.png'},
  {url: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA04.png'},
  {url: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA05.png'},
])

//前往登录页校验，看用户是否已经登录
function toLogin() {
  if (user){
    $message.destroyAll()
    $message.warning('已登录')
  }else {
    toPage('login')
  }
}
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
// 图片加载
const imgList = ref([index01,index02,index03])

//用户操作设置
const dropdownOption = [
  {
    label: "用户资料",
    key: "profile",
    icon: renderIcon(UserIcon)
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(LogoutIcon)
  }
]
function handleSelect(key) {
  if(key===dropdownOption[1].key){
    //退出登录
    sessionStorage.clear()   //清除所有session值
    localStorage.clear()     //清除所有localStorage值
    window.location.reload()
  }else {
    toPage('std/userInfo')
  }
}
let activeKey = ref(null)
//菜单
const menuOptions = [
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name: "home",
          }
        },
        { default: () => "Home" }
    ),
    key: "home",
    icon: renderIcon(BookIcon)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name: "std/learn",
          }
        },
        { default: () => "Learn" }
    ),
    key: "learn",
    icon: renderIcon(BookIcon),
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name: "std/note",
          }
        },
        { default: () => "Note" }
    ),
    key: "note",
    icon: renderIcon(BookIcon)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name: "std/userInfo",
          }
        },
        { default: () => "Person" }
    ),
    key: "Person",
    icon: renderIcon(BookIcon),
  }
]
//打字机效果
onMounted(()=>{
  new TypeIt("#synopsis",{
    speed: 100,
    deleteSpeed: 150,
    loop: true
  })
      .type("<b>编程学习利器</b>",{delay: 2000})
      .delete(13,{delay:1000})
      .type("<b>便捷模型使用</b>",{delay:2000})
      .go();
})
</script>

<template>
  <keep-alive>
    <n-layout :native-scrollbar="false" class="layout">
    <n-layout-header class="nl-header core">
      <n-grid x-gap="12" :cols="8" class="nl-h-grid">
        <n-gi class="item-auto hover-pointer" >
          <n-image
              @click="toPage()"
               preview-disabled
               width="100"
               src="/src/assets/picture/Linter.png"
          />
        </n-gi>
        <n-gi offset="2" span="4" class="item-center">
          <n-menu
              v-model:value="activeKey"
              mode="horizontal"
              :options="menuOptions"
              responsive
          />
        </n-gi>
        <n-gi class="item-center" >
          <n-button v-if="!user" text size="large" @click="toLogin" class="hover-pointer" title="前往登录">
            <template #icon>
              <n-icon>
                <WineIcon/>
              </n-icon>
            </template>
              Login
          </n-button>
          <n-dropdown v-else :options="dropdownOption" trigger="hover" @select="handleSelect" :show-arrow="true">
            <n-button text size="large" class="hover-pointer" :title="user.username">
              <template #icon>
                <n-icon>
                  <WineIcon/>
                </n-icon>
              </template>
              {{ user.username }}
            </n-button>
          </n-dropdown>
        </n-gi>
      </n-grid>
    </n-layout-header >
    <n-layout-content :native-scrollbar="false" class="core nl-content">
      <n-flex vertical align="center" justify="center" class="page-area">
        <n-grid x-gap="12" y-gap="12" cols="2" class="curtain">
          <n-gi class="green">
            <div class="figure-group">
              <div class="figure"/>
              <div class="square"/>
              <div class="circular"/>
            </div>
          </n-gi>
          <n-gi class="green">
            <div class="figure-group">
              <div class="figure"/>
              <div class="square"/>
              <div class="circular"/>
            </div>
          </n-gi>
          <n-gi class="green">
            <div class="figure-group">
              <div class="figure"/>
              <div class="square"/>
              <div class="circular"/>
              <div class="figure"/>
            </div>
          </n-gi>
          <n-gi class="green">
            <div class="figure-group">
              <div class="figure"/>
              <div class="square"/>
              <div class="circular"/>
            </div>
          </n-gi>
        </n-grid>
        <n-space vertical align="center" justify="center"  class="stage" >
          <h1>Linter+Ai<span id="synopsis"></span></h1>
          <p class="text-align" style="width: 30rem">Liter学习神器，集AI创作、笔记制作、模型下载多种编程学习工具于一体，激发能力无限延伸</p>
          <n-button color="#8a2be2" :style="{width:'7.2rem'}" @click="toPage('std/learn')">点击使用</n-button>
        </n-space>
      </n-flex>
      <n-flex vertical class="page-area">
        <n-h1 class="page-two-h1">Linter+Ai 编程学习利器</n-h1>
        <n-tabs type="line" default-value="person" animated justify-content="space-around">
          <n-tab-pane name="person" tab="Person">
            <div class="cart-item-bg"
                 :style="{backgroundImage: 'url('+showImg[0].url+')'}"/>
<!--              <n-image src="http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA01.png"-->
<!--              style="border: 1px solid black;"/>-->
          </n-tab-pane>
          <n-tab-pane name="note" tab="Note">
            <div class="cart-item-bg" :style="{backgroundImage: 'url('+showImg[1].url+')'}"/>
          </n-tab-pane>
          <n-tab-pane name="course" tab="Course">
            <div class="cart-item-bg" :style="{backgroundImage: 'url('+showImg[2].url+')'}"/>
          </n-tab-pane>
          <n-tab-pane name="model" tab="Model">
            <div class="cart-item-bg" :style="{backgroundImage: 'url('+showImg[3].url+')'}"/>
          </n-tab-pane>
          <n-tab-pane name="community" tab="Community">
            <div class="cart-item-bg" :style="{backgroundImage: 'url('+showImg[4].url+')'}"/>
          </n-tab-pane>
        </n-tabs>
      </n-flex>
      <n-flex vertical justify="space-evenly" class="page-area">
        <h1>适合人群</h1>
        <!--   TODO: 图片我是定死的，需要修改     -->
        <n-space justify="space-around">
          <div class="page-card cart-item-od1">
            <n-space vertical justify="space-around" size="large">
              <n-image :src="imgList[0]" width="200rem"/>
              <n-h2 style="margin-left: 30%;margin-top: 20%"> 开发人员 </n-h2>
            </n-space>
          </div>
          <div class="page-card cart-item-od2">
            <n-space vertical justify="space-around" size="large">
              <n-image :src="imgList[1]" width="200rem"/>
              <n-h2 style="margin-left: 20%;margin-top: 20%"> 相关专业人员 </n-h2>
            </n-space>
          </div>
          <div class="page-card cart-item-od3">
            <n-space vertical justify="space-around" size="large">
              <n-image :src="imgList[2]" width="200rem"/>
              <n-h2 style="margin-left: 30%;margin-top: 20%"> 初学者 </n-h2>
            </n-space>
          </div>
        </n-space>
        <h1>总有一款适合你</h1>
      </n-flex>
    </n-layout-content>
    <footer-communal class="nl-content"/>
    <n-back-top :right="100" />
  </n-layout>
  </keep-alive>
</template>

<style lang="scss" scoped>
$base-height:72px;
//对顶部导航栏进行设计
.nl-header{
  position: fixed;

  height: $base-height;
  width: 100vw;
  z-index: 9;
  box-shadow: 2px 2px 2px #f2f2f2;
  .nl-h-grid{
    font-size: 21px;
    height: $base-height;
  }
  .log-tag{
    width: 7.2rem;
    height: 2.7rem;
    border-radius: 5px;
  }
}
//幕布-第一板块背景的几个图形设计
.curtain{
  position: absolute;
  padding: 0 5%;
  width: 90%;
  height: 100%;
  z-index: 0;
  background: url("/src/assets/picture/show/download1.png") no-repeat;
  & .green:nth-child(1){
    background: transparent;
    .figure-group{
      left: 5%;
      .figure{
        width: 12vw;
        height: 12vw;
        background: url("/src/assets/picture/show/TheLittleThingsStationery.png");
        background-size: 100% 100%;
      }
    }

  }
  & .green:nth-child(2){
    background: transparent;
    .figure-group{
      right: 5%;
      .figure{
        width: 12vw;
        height: 12vw;
        background: url("/src/assets/picture/show/Component2.png");
        background-size: 100% 100%;
        left: 21%;
        top: 24%;
      }
      .square{
        transform: rotate(20deg);
        background: rgba(0, 128, 0,0.24);

        &:hover{
          transition: 0.45s 0s ease;
          transform: rotate(18deg);
        }
      }
      .circular{
        background: rgb(0, 128, 0);
        top: 45%;
        right: 9%;
      }
    }
  }
  & .green:nth-child(3){
    background: transparent;
    left: 5%;
    .figure-group{
      .figure:first-child{
        width: 12vw;
        height: 12vw;
        bottom: 10%;
        background: url("/src/assets/picture/show/Group1.png");
        background-size: 100% 100%;
        z-index: 2;
      }
      .figure:last-child{
        width: 12vw;
        height: 12vw;
        right: 5%;
        bottom: 10%;
        background: url("/src/assets/picture/show/TheLittleThingsAnalytics.png");
        background-size: 100% 100%;
      }
      .square{
        height: 81%;
        transform: rotate(0deg);
        background: rgba(255, 254, 233,0.24);
      }
      .circular{
        background: rgb(255, 254, 233);
        top:42%;
        left: 0;
      }
    }
  }
  & .green:nth-child(4){
    background: transparent;
    .figure-group{
      right: 5%;
      .figure{
        width: 20vw;
        height: 20vw;
        left: 12%;
        bottom: 15%;
        background: url("/src/assets/picture/show/TheLittleThingsWorking1.png") no-repeat;
        background-size: 100% 100%;
      }
      .square{
        height: 81%;
        transform: rotate(0deg);
        background: rgba(101, 134, 172,0.24);
        &:hover{
          transition: 0.45s 0s ease;
          transform: rotate(0deg);
        }
      }
      .circular{
        background: rgb(101, 134, 172);
        top: 0;
        right: 7%;
      }
    }
  }
}
//舞台-要展示的文章内容
.stage{
  position: relative;
  z-index: 7;
  h1{
    font-weight: bold;
    font-size: 4.5rem;
  }
}
//，每一部分的大小设计
.page-area{
  position: relative;
  width: 100%;
  height: 100vh;
  margin-bottom: 1rem;
  border-top: 1px solid #ccc;
  &:first-child{

  }
  &:nth-child(2){
    border-radius: 5rem;
    width: 90%;
    padding: 0 5%;
    background: #dae2eb;
    height: 56rem;
    .cart-item-bg{
      background: #fff no-repeat;
      background-size: 81% 96%;
     background-position: center;
      width: 100%;
      border-radius: 2.7rem;
      height: 38rem;
    }
  }
  &:nth-child(3){

    background: url("/src/assets/picture/show/Ellipse17.png") no-repeat left /21rem,
                url("/src/assets/picture/show/Ellipse18.png") no-repeat right /21rem,
                url("/src/assets/picture/show/download1.png") no-repeat top /100%,
                #fefefe url("/src/assets/picture/show/BeepBeepCurlyLine 2.png") no-repeat bottom /81% 18%;
    width: 86%;
    padding: 0 7%;
    h1{
      text-align: center;
      letter-spacing: 10px;
    }
  }
}

.page-two-h1{
  font-weight: bold;
  font-size: 3rem;
  margin-top: 2rem;
  text-align: center;
  color: #fff;
}

.nl-content{
  position: relative;
  top: $base-height;
}

.page-card{
  width: 15rem;
  height: 21rem;
  border-radius: 15px;
  backdrop-filter: blur(15px);
  box-sizing: border-box;
  padding: 1.2rem;
  transition: 0.45s 0s ease all;
  &:hover{
    transition: 0.45s 0s ease all;
    transform: rotate(-20deg);
  }
}
.cart-item-od1{
  background: rgba(250,250,250,0.21);
}
.cart-item-od2{
  background: rgba(216,216,256,0.21);
}
.cart-item-od3{
  background: rgba(250,250,250,0.21);
}
</style>
